import Ledger from '../index'
import './index.less'
import { Form, Table, Select, DatePicker } from 'antd';
import type { CheckboxChangeEvent } from 'antd/es/checkbox';
import { ColumnsType } from 'antd/es/table';
import { useState } from 'react';
interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
  tags: string[];
}
const columns: ColumnsType<DataType> = [
  {
    title: '科目名称',
    dataIndex: 'name',
    key: 'name',
    onCell: (_, index:any) => ({
      rowSpan: index % 3 == 0 || index === 0 ? 3 : 0
    }),
    render: (text) => <a>{text}</a>,
  },
  {
    title: '记账时间',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '摘要',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '借方金额',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '余额',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '方向',
    dataIndex: 'age',
    key: 'age',
  },
];
const data: DataType[] = [
  {
    key: '1',
    name: '1001库存现金',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: '1002库存现金',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: '1003库存现金',
    age: 32,
    address: 'Sydney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
  {
    key: '4',
    name: '1002库存现金',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '5',
    name: '1002库存现金',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
];
function FinancialG() {
  //财务表格
  
  const [selectedValue, setSelectedValue] = useState('male');
  const { Option } = Select;
  const { RangePicker } = DatePicker;
  const onFinish = (values: any) => {
    console.log(values);
  };
  const onChange = (e: CheckboxChangeEvent) => {
    console.log(`checked = ${e.target.checked}`);
  };
  return (
    <div className='finall'>
      <Ledger header='财务总账'></Ledger>
      <div className='center'>
        <Form
          name="customized_form_controls"
          layout="inline"
          onFinish={onFinish}
        >
          <Form.Item
            label="记账时间："
            name="date"
            style={{ marginLeft: '60px' }}
          >
            <RangePicker style={{ width: 215 }} />
          </Form.Item>
          <Form.Item
            label="科目："
            name="subone"
          >
            <Select
              placeholder="科目筛选"
              allowClear
              style={{ width: 140 }}
            >
              <Option value="male">male</Option>
              <Option value="female">female</Option>
              <Option value="other">other</Option>
            </Select>
          </Form.Item>
          <Form.Item
            label="至"
            name="subtwo"
          >
            <Select
              placeholder="科目筛选"
              allowClear
              style={{ width: 140 }}
            >
              <Option value="male">male</Option>
              <Option value="female">female</Option>
              <Option value="other">other</Option>
            </Select>
          </Form.Item>
          <button style={{ width: '60px', height: '35px', border: 'none', background: '#22AB82', color: 'white' }} onClick={onFinish}>搜素</button>
        </Form>
        <Form>
          <button style={{ width: '60px', height: '35px', marginRight: 20, border: 'none', background: '#22AB82', color: 'white' }}>导出</button>
          <button style={{ width: '60px', height: '35px', border: 'none', background: '#22AB82', color: 'white' }}>打印</button>
        </Form>
      </div>
      <Table columns={columns} dataSource={data} style={{ marginLeft: '60px' }} bordered/>
      <span className='footer'>当前合计，共3条记录</span>
    </div>
  )
}
export default FinancialG